<template>
  <div>
    Hello
  </div>
</template>

<script>
import { onBeforeMount, onBeforeUpdate, onMounted, onUpdated } from 'vue';

export default {
  setup() {
    // !#1 把 Vue2 的 beforeCreate 和 created 换成了 setup
    // !#2 相同的生命周期可以写多次，不会覆盖，执行顺序和书写顺序相同
    // !#3 生命周期的名字会有变化
    onBeforeMount(() => {
      console.log('#1 onBeforeMount')
    })
    onMounted(() => {
      console.log('#2.1 onBeforeMount')
    })
    onMounted(() => {
      console.log('#2.2 onBeforeMount')
    })
    onBeforeUpdate(() => {
      console.log('onBeforeUpdate')
    })
    onUpdated(() => {
      console.log('onUpdated')
    })
  }
}
</script>

